<template>
	<view class="box">
		<u-modal :show="showModel" title="提示" content='学习暂未开启' confirmText="我知道啦" confirmColor="#0F53AC"
			@confirm="confirmModel()"></u-modal>
		<view class="top">
			<!-- #ifdef MP-WEIXIN -->
			<polyv-player id="polyv" width="100%" height="420rpx" :showProgressBar="false" :vid="vedioId"
				v-if="vedioId!=''" isAllowSeek="no" :startTime="blwStartTime" @timeupdate="(e) => bindpause(e)"
				 @pause="pause()" @ended="ended()">
			</polyv-player>
			<!-- #endif -->
			<img style="height: 420rpx;" v-else :src="dataForm.coverImg" alt="">
		</view>
		<view class="tigs">温馨提示: 学习期间请勿退出或关闭手机屏幕!</view>
		<view class="listBot">
			<u-sticky bgColor="#fff">
				<u-tabs :list="list" :lineWidth="80" lineColor="#0F53AC" :activeStyle="activeStyle" :scrollable="false"
					:inactiveStyle="inactiveStyle" :itemStyle="itemStyle" @click="tabsClick" :current="current">
				</u-tabs>
			</u-sticky>
		</view>
		<view class="info" v-if="current == 0">
			<view class="title">{{dataForm.name}}</view>
			<view class="small-title">
				<!-- <view>建议学习时长：{{dataForm.learnDuration}}{{dataForm.durationUnit}}</view> -->
				<view class="tags">{{dataForm.courseTypeName}}</view>
			</view>
			<view class="main-content">
				{{dataForm.brief}}
			</view>
		</view>
		<view v-if="current == 1">
			<view class="main" v-for="(it,inx) in dataForm.adjunctResponseList" :key="it.id"
				@click="fileClick(it.adjunctType,it.fileUrl,it.id,it.studyProcess,it.fileName,it.viewSecond)">
				<image class="img" v-if="it.adjunctType == 1" src="../../../static/images/index/wendang.png" mode="">
				</image>
				<image class="img" v-else src="../../../static/images/index/shipin.png" mode=""></image>
				<view class="content">
					<view class="filename">{{inx + 1}}、{{it.fileName}}</view>
					<view class="bfb">
						已学{{it.studyProcess=='' ? 0 : it.studyProcess}}%
					</view>
				</view>
			</view>
		</view>
		<view class="info" v-if="current == 2">
			<template v-if="dataForm.examFlag==1">
				<image class="title-image" :src="dataForm.picture"></image>
				<view class="info-title">
					<view>{{dataForm.examPaperName}}</view>
					<view class="info-tags">{{dataForm.examFlag == 1 ? '未考试':'已考试'}}</view>
				</view>
				<view class="info-content">考试时间: {{dataForm.examStartTime}}至{{dataForm.examEndTime}}</view>
				<view class="info-text"><span>分值: {{dataForm.totalMark}}分</span>
					<span>及格分数: {{dataForm.passMark}}分</span>
					<span>可考次数: {{dataForm.examNum}}次</span>
				</view>
				<view :style="dataForm.studyStatus != 2 ? 'background-color: rgba(15, 83, 172, 0.5);': ''"
					class="goTest" @click="goExam()">去考试</view>

			</template>
			<template v-else-if="dataForm.examFlag==3">
				<image class="title-image" :src="dataForm.picture"></image>
				<view class="info-title">
					<view>{{dataForm.examPaperName}}</view>
					<view class="info-tags-success">{{'已考试'}}</view>
				</view>
				<view class="info-content">考试时间: {{dataForm.examStartTime}}至{{dataForm.examEndTime}}</view>
				<view class="info-text"><span>分值: {{dataForm.totalMark}}分</span>
					<span>及格分数: {{dataForm.passMark}}分</span>
					<span>可考次数: {{dataForm.examNum}}次</span>
				</view>
				<view class="goTest" @click="goToSee()">考试结果</view>
			</template>
			<template v-else>
				<view style="text-align: center;">
					<image class="noExam" src="../../../static/images/index/noMenu.png" mode=""></image>
					<view class="noExamText">暂无关联试卷</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeStyle: {
					color: '#0F53AC',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: '#8c8c8c',
					transform: 'scale(1)'
				},
				itemStyle: {
					paddingLeft: '30rpx',
					paddingRight: '30rpx',
					paddingTop: '24rpx',
					paddingBottom: '24rpx',
					height: '48rpx'
				},
				current: 0,
				list: [{
					name: '简介',
				}, {
					name: '目录',
				}, {
					name: '试卷',
				}],
				// 课程id
				id: '',
				// 关联培训id
				trainId: '',
				dataForm: {},
				vedioId: '', //视频Id
				blwStartTime: 0,
				showModel: false,
				params: {
					courseId: '',
					adjunctId: '',
					studyProcess: '',
					viewSecond: '00:00:00',
					trainId: ''
				},
				nocun: false
			}
		},
		onLoad(options) {
			this.id = options.id
			this.params.courseId = options.id
			this.trainId = options.trainId
			this.params.trainId = options.trainId
			this.initData(0)
		},
		onShow() {
			var pages = getCurrentPages(); // 获取当前页面栈
			var currentPage = pages[pages.length - 1]; // 当前页面
			if (currentPage.data.recordNeeded) {
				currentPage.data.recordNeeded = false
				this.initData(1)
			}
		},
		onUnload() {
			var pages = getCurrentPages(); //当前页面栈
			if (pages.length > 1) {
				var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象
				beforePage.data.recordNeeded = true;
			}
		},
		methods: {
			initData(type) {
				uni.$u.http.get(`/train/mobile/study/detail?id=${this.id}&trainId=${this.trainId}`).then(res => {
					if (res.code == 0) {
						this.dataForm = res.data
						this.nocun = true
						if (type == 0) {
							this.nocun = false
							if (res.data.adjunctResponseList.length > 0) {
								
									let chil = res.data.adjunctResponseList[0]
									if (chil.adjunctType == 2) {
										if (chil.viewSecond != '') {
											this.blwStartTime = this.timeEvent(chil.viewSecond)
										}
										this.vedioId = chil.fileUrl
										this.params.adjunctId = chil.id
										return
									} else {
										this.vedioId = ''
										return
									}
								
							}
						}
					}
				}).catch(err => {})
			},
			tabsClick(e) {
				this.current = e.index
			},

			//点击文件或视频
			fileClick(type, url, id, studyProcess, fileName, viewSecond) {
				console.log(this.nocun)
				if (!this.nocun && !(this.params.viewSecond == '00:00:00' || this.params.viewSecond == '')) {
					this.nocun = true
					this.baocun(1, this.params.adjunctId)
				}

				if (type == 2) {
					this.params.adjunctId = id
					this.vedioId = url
					if (viewSecond != '') {
						this.blwStartTime = this.timeEvent(viewSecond)
					}else{
						this.blwStartTime = 0 
					}
				} else {
					this.vedioId = ''
					this.params.studyProcess = 100
					this.params.viewSecond = ''
					this.params.adjunctId = id
					this.baocun()
					uni.$u.http.get(`/base/upload/bindFileUrlByFileName?fileUrl=${url}&fileName=${fileName}`).then(res => {
						if (res.code == 0) {
							// uni.navigateTo({
							//   url: `/pages/subPackagesC/learning/previewArea?url=${res.data}`
							// })
							uni.downloadFile({
								url: res.data, //下载地址，后端接口获取的链接
								filePath: wx.env.USER_DATA_PATH +'/'+ fileName,
								success: (data) => {
									if (data.statusCode === 200) {
										
										var filePath = data.filePath
										//预览
										uni.openDocument({
											filePath: filePath,
											showMenu: true,
											success: function(res) {}
										});
									}
								},
								fail: (err) => {
									console.log(err);
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '失败请重新下载',
									});
								},
							});
						}
					})
				}
			},

			confirmModel() {
				this.initData()
				this.showModel = false
			},
			start(){
				console.log('1213')
				this.nocun = false
			},
			//去考试
			goExam() {
				if (this.dataForm.studyStatus != 2) {
					uni.$u.toast("请完成课程学习后,进行考试")
					return
				}
				uni.$u.http.post(`/train/mobile/exam/getDetail`, {
					examPaperId: this.dataForm.examPaperId,
					trainId: this.trainId,
				}).then(res => {
					if (res.code == 0) {
						uni.navigateTo({
							url: `/pages/subPackagesC/exam/examwait?examPaperId=${this.dataForm.examPaperId}&trainId=${this.trainId}`
						})
					}
				}).catch(err => {})
			},
			// 考试结果
			goToSee() {
				// 已考试
				uni.navigateTo({
					url: `/pages/subPackagesC/exam/examfinish?trainId=${this.trainId}&examPaperId=${this.dataForm.examPaperId}&formType=${'peixun'}`
				})
			},
			//获取视频播放进度
			bindpause(e) {
				this.nocun = false
				let arr = this.getTime(e.detail.currentTime)
				this.params.viewSecond = arr[0] + ':' + arr[1] + ':' + arr[2]
			},

			pause() {
				if (this.nocun) {
					return
				}
				this.baocun()
			},

			ended() {
				
				let platform = uni.getSystemInfoSync().platform;
				if(platform === 'ios'){
					console.log('ios')
				}else if(platform === 'android'){
					console.log('android')
					this.baocun()
				}else{
					console.log('其他')
				}
			},

			baocun(num, id) {
				const params = JSON.parse(JSON.stringify(this.params))
				if (num == 1) {
					params.adjunctId = id
					
				} else {

				}

				uni.$u.http.post(`/train/mobile/study/saveProgress`, params).then(res => {
					if (res.code == 0) {
						this.initData(1)
						// uni.$u.toast('进度保存成功')
					}
				}).catch(err => {})
			},

			getTime(time) {
				// 转换为时分秒
				let h = parseInt(time / 60 / 60 % 24)
				h = h < 10 ? '0' + h : h
				let m = parseInt(time / 60 % 60)
				m = m < 10 ? '0' + m : m
				let s = parseInt(time % 60)
				s = s < 10 ? '0' + s : s
				// 作为返回值返回
				return [h, m, s]
			},

			timeEvent(e) {
				var time = e;
				var len = time.split(':')
				if (len.length == 3) {
					var hour = time.split(':')[0];
					var min = time.split(':')[1];
					var sec = time.split(':')[2];
					return Number(hour * 3600) + Number(min * 60) + Number(sec);
				}
				if (len.length == 2) {
					var min = time.split(':')[0];
					var sec = time.split(':')[1];
					return Number(min * 60) + Number(sec);
				}
				if (len.length == 1) {
					var sec = time.split(':')[0];
					return Number(sec);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.top {
			width: 100%;
			height: 420rpx;

			>img {
				width: 100%;
			}
		}

		.tigs {
			color: rgba(15, 83, 172, 1);
			background: rgba(245, 245, 245, 1);
			font-size: 14px;
			padding: 28rpx 32rpx;
		}

		.info {
			padding: 32rpx;

			.title {
				color: #2B2B2B;
				font-size: 17px;
				font-weight: 500;
				margin-bottom: 16rpx;
			}

			.small-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #f2f2f2;
				font-size: 24rpx;
				color: #4D4D4D;
				margin-bottom: 28rpx;
				padding-bottom: 28rpx;

				.tags {
					// width: 72px;
					// height: 22px;
					padding: 8rpx 24rpx;
					border-radius: 4px;
					background: rgba(15, 83, 172, 0.2);
					display: flex;
					justify-content: center;
					align-items: center;
					color: rgba(15, 83, 172, 1);
				}
			}

			.main-content {
				color: #666666;
				font-size: 15px;
				font-weight: 400;
			}


			.title-image {
				display: block;
				width: 100%;
				height: 156px;
				border-radius: 4px;

			}

			.info-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 16px;
				font-weight: 500;
				color: #2B2B2B;
				margin: 40rpx 0 60rpx;

				.info-tags {
					border-radius: 4px;
					background: rgba(252, 119, 10, 0.2);
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 4px 12px 4px 12px;
					color: #FC770A;
					font-size: 12px;
					min-width: 12%;
				}

				.info-tags-success {
					border-radius: 4px;
					background: rgba(40, 184, 105, 0.2);
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 4px 12px 4px 12px;
					color: #28B869;
					font-size: 12px;
					min-width: 12%;
				}
			}

			.info-content {
				font-size: 15px;
				font-weight: 400;
				color: #666666;
				margin-bottom: 16rpx;
			}

			.info-text {
				font-size: 15px;
				font-weight: 400;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #666666;
			}

			.goTest {
				margin-top: 48rpx;
				width: 100%;
				height: 48px;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #0F53AC;
				color: #fff;
				font-size: 17px;
				border-radius: 6px;
			}
		}

		.u-modal__content__text {
			text-align: center;
		}
	}

	.filename {
		margin-right: 20rpx;
		width: 300rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	.main {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #4D4D4D;
		// margin-bottom: 24rpx;
		border-bottom: 2rpx solid #f2f2f2;
		padding: 32rpx;

		.img {
			width: 96rpx;
			height: 96rpx;
			margin-right: 20rpx;
		}

		.content {
			.filename {
				color: #2B2B2B;
				font-size: 15px;
				font-weight: 400;
				line-height: 22px;
			}

			.bfb {
				color: #8C8C8C;
				font-size: 14px;
				font-weight: 400;
				line-height: 25px;
				margin-top: 6rpx;
			}
		}
	}

	.noExam {
		width: 224rpx;
		height: 172rpx;
		margin-top: 160rpx;
		margin-bottom: 40rpx;
	}
	
	.noExamText{
		font-size: 16px;
		font-weight: 400;
		color:#666666;
	}
</style>